const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

// const { VantResolver } = require('unplugin-vue-components/resolvers');
// const ComponentsPlugin = require('unplugin-vue-components/webpack');

// 引入等比适配插件
// const px2rem = require('postcss-px2rem')
// // 配置基本大小
// const postcss = px2rem({
//   // 基准大小 baseSize，需要和rem.js中相同
//     remUnit: 16,
//     // exclude:"/node_modules/i",
// })

module.exports = defineConfig({
  transpileDependencies: true,
//   devServer: {
//     port: 8080,
//     open: true,
//     proxy: {
//         '/api': {
//             target: 'http://localhost:8080', // 设置被替换代理的目的域名与端口
//             secure: false, // 设置是否允许 https接口
//             changeOrigin: true, // 设置是否允许接口跨域
//             pathRewrite: {
//                 '^/api': '' // 设置路径重写的代理名称，这里用代理名称代替target里面的 'http://localhost:8002' 地址
//             }
//         }
//     }
// },


//   publicPath: './',
 
//   configureWebpack: {
//     plugins: [
//       AutoImport({
//         resolvers: [ElementPlusResolver()],
//       }),
//       Components({
//         resolvers: [ElementPlusResolver()],
//       }),
//     ],
//   },
//   runtimeCompiler: true,
//  css: {
//  loaderOptions: {
//  postcss: {
//    postcssOptions:{
//         plugins: [
//  // require('postcss-px2rem')({  //配置postcss-px2rem适配
//   //     remUnit:100
//   // })
//   require('postcss-plugin-px2rem')({ //配置postcss-plugin-px2rem适配
//  rootValue: 192, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
//  unitPrecision: 5, //允许REM单位增长到的十进制数字。
//   //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
//   // propBlackList: [], //黑名单
//   exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
//   // selectorBlackList: [], //要忽略并保留为px的选择器
//   // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
//   // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
//   mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
//   // minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
//   }),
//  ]
 
//   }
//   }
//  }
// }
})

// module.exports = {
  
//   // lintOnSave: true,
//   // css:{
//   //   loaderOptions: {
//   //     postcss: {
//   //           plugins: [
//   //               postcss
//   //           ]
//   //       }

//   //   }
//   // }
//   // lintOnSave: true,
//   // css: {
//   //     loaderOptions: {
//   //         postcss: {
//   //             plugins: [
//   //                 postcss
//   //             ]
//   //         }
//   //     }
//   // },
//   // devServer: {
//   //   port: 8000,
//   //   proxy: {
//   //     "/msg/show.htm": {
//   //       target: "http://youku.min.com/",
//   //       secure: false
//   //     }
//   //   }
//   // },
// }
module.exports={
  publicPath: './',
 
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
  runtimeCompiler: true,
 css: {
 loaderOptions: {
 postcss: {
   postcssOptions:{
        plugins: [
 // require('postcss-px2rem')({  //配置postcss-px2rem适配
  //     remUnit:100
  // })
  require('postcss-plugin-px2rem')({ //配置postcss-plugin-px2rem适配
 rootValue: 192, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
 unitPrecision: 5, //允许REM单位增长到的十进制数字。
  //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
  // propBlackList: [], //黑名单
  exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
  // selectorBlackList: [], //要忽略并保留为px的选择器
  // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
  // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
  mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
  // minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
  }),
 ]
 
  }
  }
 }
}
}
